<template>
    <el-row :gutter="20">
        <el-col :span="8">
            <el-table :data="dataList" size="large">
                <el-table-column prop="s_name" label="name" width="120"></el-table-column>
                <el-table-column prop="c_name" label="course" width="120"></el-table-column>
                <el-table-column prop="t_name" label="teacher" width="120"></el-table-column>
                <el-table-column prop="grade" label="grade" width="120"></el-table-column>
            </el-table>
        </el-col>
        <el-col :span="16">
            <el-descriptions class="margin-top" title="Introduce" :column="3" border>
                <template #extra>
                    <el-button @click="changeMessageClick" type="primary">修改个人信息</el-button>
                </template>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <user />
                            </el-icon>
                            name
                        </div>
                    </template>
                    {{ mySelf.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <iphone />
                            </el-icon>
                            username
                        </div>
                    </template>
                    {{ mySelf.username }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <location />
                            </el-icon>
                            age
                        </div>
                    </template>
                    {{ mySelf.age }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <tickets />
                            </el-icon>
                            Remarks
                        </div>
                    </template>
                    <el-tag size="small">School</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <office-building />
                            </el-icon>
                            gender
                        </div>
                    </template>
                    {{ mySelf.gender }}
                </el-descriptions-item>
            </el-descriptions>
        </el-col>
    </el-row>
    <ElCalendar v-model="date" />

    <el-dialog v-model="changeValue" :destroy-on-close="true">
        <changeMessage />
    </el-dialog>
</template>

<script setup>
import changeMessage from "./changeMessage.vue";
import { reactive } from "vue";
import { ElTable, ElDescriptions, ElCalendar, ElMessage, ElDialog } from "element-plus";
import { getMyGradeAndCourse, getMySelfIntroduce } from '../API/ApiMethod'
import { ref } from "vue";
import { useRouter } from 'vue-router'
components: {
    ElTable,
        ElDescriptions,
        ElCalendar,
        ElDialog,
        changeMessage
}
let type = sessionStorage.getItem('type')
let iconStyle = ref('')
const date = ref(new Date())
let dataList = reactive([

])
const router = useRouter()
let changeValue = ref(false)
let mySelf = reactive({
    name: '',
    username: '',
    age: '',
    gender: ''
})
if(type=='student'){
getMyGradeAndCourse().then(res => {
    if (res.code == 10000) {
        res.data.forEach(item => {
            dataList.push(item)
        })
    }
})
}
if (type == 'admin' || type == 'teacher') {
    router.push({
        name:'index'
    })
    ElMessage({
        type:'danger',
        message:'暂无权限'
    })
} else {
    getMySelfIntroduce().then(res => {

        if (res.code == 10000) {
            mySelf.gender = res.data.s_gender
            mySelf.username = res.data.username
            mySelf.age = res.data.s_age
            mySelf.name = res.data.s_name
        } else {
            ElMessage({
                type: 'danger',
                message: '你的信息未找到，请重新登录'
            })
        }
    })
}
const changeMessageClick = () => {
    changeValue.value = !changeValue.value
}

function handleOpen() {

}
</script>

<style>

</style>